<template>
	<view class="proce-content">
		<view class="proce-header">
			<text>操作进程</text>
			<text>时间</text>
		</view>

		<hr class="hr-solid">
		<view class="step_box">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="steps" v-for="(item,index) in boardList" :key="index">
					<view class="left">
						<view class="line">
							<text
								:class="boardDetail[item.value]&&item.processCode==boardDetail[item.value].processCode?'active':''"></text>
							<text
								:class="boardDetail[item.value]&&item.processCode==boardDetail[item.value].processCode?'activeLine':''"></text>
						</view>
					</view>
					<view class="right">
						<view class="left">
							<text
								:class="boardDetail[item.value]&&item.processCode==boardDetail[item.value].processCode?'active':''">{{item.name}}</text>
							<view v-if="boardDetail[item.value]" class="step-time">
								<view>参考：{{boardDetail[item.value].referenceTime}}分钟</view>
								<view>耗时：{{boardDetail[item.value].actualTime}}分钟</view>
							</view>
						</view>
						<view class="center" v-if="index == 0&&boardDetail[item.value]">
							<view class="title">行调</view>
							<view>
								<text class="step-title">线路：</text>
								<text class="step-content">
									{{httpParams.lineName}}
								</text>
							</view>
							<view>
								<text class="step-title">设备：</text>
								<text class="step-content">
									{{httpParams.equName}}
								</text>
							</view>
							<view>
								<text class="step-title">来源：</text>
								<text class="step-content">
									系统发布
								</text>
							</view>
							<view>
								<text class="step-title">故障内容：</text>
								<text class="step-content">
									{{httpParams.content}}
								</text>
							</view>
							<view>
								<text class="step-title">故障位置：</text>
								<text class="step-content">
									{{httpParams.staName}}
								</text>
							</view>


							<!-- <view class="step-title">故障内容：</view>
							<view class="step-content">{{httpParams.content}}</view> -->
						</view>
						<view class="center" v-if="index == 1&& boardDetail[item.value]">
							<view class="title">线路指挥</view>
							<view class="step-title">
								<text
									v-for="(items,indexs) in boardDetail[item.value].personInfos">{{`${items.name }${indexs== boardDetail[item.value].personInfos.length-1?"":'，'}` }}
								</text>
							</view>
						</view>
						<view class="center" v-if="index == 2&&boardDetail[item.value]">
							<view class="title">班组</view>
							<view class="step-title">应急负责人：</view>
							<view class="people_box">
								<view v-for="(items,indexs) in boardDetail[item.value].leader" :key='items.name'>
									<view v-if="items" class="table_class">
										<view class="step-content">{{items.name}}</view>
										<view class="step-content">{{items.roleName}}</view>
										<view class="step-content">{{items.phone}}</view>
									</view>
								</view>
							</view>
							<view class="step-title">应急人员：</view>
							<view class="people_box">
								<view v-for="(items,indexs) in boardDetail[item.value].person" :key='items.name'>
									<view v-if="items" class="table_class">
										<view class="step-content">{{items.name}}</view>
										<view class="step-content">{{items.roleName}}</view>
										<view class="step-content">{{items.phone}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="center"
							v-if="index == 3&&boardDetail[item.value]&&boardDetail[item.value].processCode==item.processCode">
							<view class="title">班组员</view>
							<view v-for="(items,indexs) in boardDetail[item.value].personInfos" :key='items.name'>
								<view v-if="items" class="table_class">
									<view class="step-content">{{items.name}}
									</view>
									<view class="step-content">{{items.roleName}}
									</view>
									<view class="step-content">{{items.phone}}
									</view>
								</view>
							</view>
						</view>
						<view class="center" v-if="index == 4&&boardDetail[item.value]">
							<view class="title">班组员</view>
							<view class="step-title">故障名称：</view>
							<view class="step-content">{{httpParams.content}}</view>
							<!-- 	<view class="step-title">故障处置描述：</view>
							<view class="step-content">{{boardDetail[item.value].mayCase}}</view>
							<view class="step-title">故障处置时间：</view>
							<view class="step-content">{{boardDetail[item.value].faultGroup}}</view> -->
							<view class="step-title">抢修人员：</view>
							<view v-for="(items,indexs) in boardDetail[item.value].personInfos" :key='items.name'>
								<view v-if="items" class="table_class">
									<view class="step-content">{{items.name}}
									</view>
									<view class="step-content">{{items.roleName}}
									</view>
									<view class="step-content">{{items.phone}}
									</view>
								</view>
							</view>
							<!-- 	<view class="step-content">{{boardDetail[item.value].name}}</view>
							<view class="step-title">职务：</view>
							<view class="step-content">{{boardDetail[item.value].roleName}}</view>
							<view class="step-title">电话号码：</view>
							<view class="step-content">{{boardDetail[item.value].phone}}</view> -->
						</view>
						<view class="center" v-if="index == 5&&boardDetail[item.value]">
							<!-- 	<view class="title">班组员</view> -->
							<view class="step-title">提交人员：</view>
							<view class="step-content">{{boardDetail[item.value].name}}</view>
							<view class="step-title">职务：</view>
							<view class="step-content">{{boardDetail[item.value].roleName}}</view>
							<view class="step-title">电话号码：</view>
							<view class="step-content">{{boardDetail[item.value].phone}}</view>
							<view class="step-title">可能原因：</view>
							<view class="step-content">{{boardDetail[item.value].reason}}</view>
						</view>
						<view class="time" v-if="boardDetail[item.value]">
							<text
								class="step-time-tip">{{boardDetail[item.value]?boardDetail[item.value].disposTime:''}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "processBoard",
		data() {
			return {
				boardDetail: [],
				boardList: [{
						name: '告警',
						processCode: 0,
						value: 0,
					},
					// {
					// 	name: '调度发布'
					// }, 
					{
						name: '指挥发布',
						processCode: 1,
						value: 1,
					},
					// {
					// 	name: '接警'
					// }, 
					{
						name: '派单',
						processCode: 4,
						value: 2,
					}, {
						name: '接单',
						processCode: 5,
						value: 3,
					},
					{
						name: '抢修',
						processCode: 6,
						value: 4,
					},
					{
						name: '待审核',
						processCode: 7,
						value: 5,
					},
					{
						name: '已解决',
						processCode: 8,
						value: 6,
					}
				],
			};
		},
		props: ["httpParams"],
		created() {
			this.initDetail();
			console.log('httpParams-----', this.httpParams)
		},
		methods: {
			initDetail() {
				let faultId = this.httpParams.faultId
				this.fetch('GET', this.$store.state.baseEmerUrl + '/emergency/processes/' + faultId, {}, true).then((
					res) => {
					console.log("输出一下进程看板返回数据：", res);
					if (res.success && res.data && res.data.length) {
						this.boardDetail = this.tranDetailData(res.data)
						console.log('boardDetail', this.boardDetail)
						this.judgeProcessFinal(res.data)
					} else {

						console.error(res)
					}

				})
			},
			judgeProcessFinal(unData) {
				let processFinalStatusValue = unData[unData.length - 1].processCode == 8 && unData[unData.length - 1]
					.contentJson ? JSON.parse(unData[unData.length - 1].contentJson).status : '' || ''

				if (processFinalStatusValue) {
					this.boardList[this.boardList.length - 1].name = processFinalStatusValue
				}
			},
			tranProcesscode(unData) {
				let processCodeList = unData.map(item => item.processCode);
				let processCodeMax = Math.max(...processCodeList)
				return processCodeMax;
			},
			splitName(arr) {
				let name = ''
				let id = ''
				let roleName = ''
				let phone = ""
				if (arr && arr.length) {
					for (let j = 0; j < arr.length; j++) {
						if (arr[j].name) name = name + arr[j].name + '   '
						if (arr[j].id) id = id + arr[j].id + '   '
						if (arr[j].phone) phone = phone + arr[j].phone + '   '
						if (arr[j].roleName) roleName = roleName + arr[j].roleName + '   '
					}
				}
				return {
					name,
					id,
					roleName,
					phone
				}
			},
			tranDetailData(unData) {
				// console.log("未处理前的数据：", unData);
				let boardDetail = []
				let i = 0
				for (let index = 0; index < 8; index++) {
					if (unData[index] && unData[index].processCode != 3) {
						let infoJson
						let parseJson = JSON.parse(unData[index].contentJson)
						let type = Object.prototype.toString.call(parseJson)
						if (unData[index].contentJson) {
							if (type == "[object Array]") {
								if (parseJson.length) {
									let {
										name,
										id,
										roleName,
										phone
									} = this.splitName(parseJson)
									infoJson = {
										personInfos: parseJson,
										"name": name,
										"id": id,
										"roleName": roleName,
										"phone": phone,
										"advice": parseJson[0]['advice'],
										"reason": parseJson[0]['reason']
									}
								}
							} else if (type == "[object Object]") {
								let leader = parseJson.leader
								let person = parseJson.persons
								let personInfos = parseJson.personInfos

								// let {
								// 	name,
								// 	id,
								// 	roleName,
								// 	phone
								// } = this.splitName(leader)


								// let {
								// 	name: name1,
								// 	id: id1,
								// 	roleName: roleName1,
								// 	phone: phone1
								// } = this.splitName(person)
								// let {
								// 	name: name2,
								// 	id: id2,
								// 	roleName: roleName2,
								// 	phone: phone2
								// } = this.splitName(personInfos)
								infoJson = {
									leader: parseJson.leader,
									person: parseJson.persons,
									personInfos: parseJson.personInfos,
									contentJson:parseJson
								}

							}

						}
						if (unData[index].processCode > 1) {
							boardDetail[unData[index].processCode - 2] = {
								...infoJson,

								actualTime: unData[i].actualTime || '',
								referenceTime: unData[i].referenceTime || '',
								disposTime: unData[i].insertTime.substring(0, 19) || '',
								processCode: unData[index].processCode
							}
						} else {

							boardDetail.push({
								...infoJson,
								actualTime: unData[i].actualTime || '',
								referenceTime: unData[i].referenceTime || '',
								disposTime: unData[i].insertTime.substring(0, 19) || '',
								processCode: unData[index].processCode
							})
						}
					}
					i++;
				}

				console.log('boardDetail', boardDetail)
				return boardDetail;
			},
		}
	}
</script>

<style scoped lang="less">
	.steps {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex: 1;

		.left {
			display: flex;
			flex-direction: row;

			:nth-child(2) {
				flex: 1;
			}

			.line {
				padding-top: 0px;
				display: inline-flex;
				flex-direction: column;

				uni-text {

					display: inline-block;

				}

				>:nth-child(1) {
					width: 12px;
					height: 12px;
					border: 1px solid rgb(177, 173, 170);
					border-radius: 50%;
					background-color: rgb(177, 173, 170);
					background: radial-gradient(circle, #fff, rgb(177, 173, 170));

				}

				:nth-child(2) {
					flex: 1;
					border: 1px solid rgb(177, 173, 170);
					width: 1px;
					margin-left: 5px;
					background-color: rgb(177, 173, 170);
				}

				.active {
					border: 1px solid rgb(52, 151, 42);
					// background-color: rgb(52, 151, 42);
					background: radial-gradient(circle at 2px 2px, #01ef62, #000);
					color: rgb(52, 151, 42);
				}

				.activeLine {
					border: 1px solid rgb(52, 151, 42);
					background: rgb(52, 151, 42);
				}
			}
		}

		.right {
			flex: 2;
			width: 0;
			display: flex;
			flex-direction: row;
			min-height: 160px;
			position: relative;

			// margin-top: -5px;
			.left {
				// flex: 1;
				width: 100px;
				padding-left: 10px;
				display: flex;
				flex-direction: column;
			}

			.center {
				// padding: 10px;
				// padding-top: 15px;
				flex: 2;
				width: 0;
				padding-left: 5px;

				.title {
					font-weight: bold;
					font-size: 24upx;
					padding-bottom: 10px;
					margin-left: -15px;
				}

				>:last-child {
					margin-bottom: 30px;
				}
			}

			.time {
				position: absolute;
				right: 0;
				font-weight: bold;
				font-size: 24upx;
			}


			.active {

				color: rgb(52, 151, 42);
			}
		}
	}

	.people_box {
		padding-left: 10px;
	}

	.table_class {
		// width: 80%;
		display: flex;
		flex-direction: row;
		padding: 2px 10px 2px 0px;

		.step-title {
			flex: 1;
		}

		.step-content {
			flex: 1;
		}
	}

	.step_box {
		flex: 1;
		height: 0;
	}

	.scroll-Y {
		height: 100%;
		padding: 10px 30px 10px 15px;
	}

	.proce-content {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: white;
		// height: 3100upx;
		height: calc(100vh - 132upx);

		.proce-header {
			padding-top: 20upx;
			margin: 0 50upx 20upx 50upx;

			text:nth-child(1) {
				font-weight: bold;
			}

			text:nth-child(2) {
				font-weight: bold;
				float: right;
			}
		}

		.hr-solid {
			border: 0;
			border-top: 2px solid #f2f2f2;
		}



		.step-title-top>text {
			font-weight: bold;
			font-size: 24upx;
		}

		.step-time {
			padding-top: 10px;
			font-size: 20upx;
			color: #bababa;
			// width: 156upx;
		}

		.step-time-tip {
			float: right;
			margin-right: 20upx;
			color: #696969;
			font-size: 24upx;
		}

		.step-title {
			font-weight: bold;
			// margin-top: 16upx;
			margin-bottom: 10upx;
			font-size: 24upx;
		}

		.step-content {
			color: #7b7b7b;
			font-size: 24upx;
			margin-top: 2upx;
			// width: 320upx;
		}

		.step-name {
			width: 320upx;
		}

	}

	.steps:last-child {
		.left {
			.line {
				:nth-child(2) {
					display: none;
				}
			}
		}
	}
</style>